<template>
    <div>
        <left-menu></left-menu>
        <div class="main">
            <main-head></main-head>
            <div class="col-md-8 layout">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        后台菜单列表
                        <div class="text-right">
                            <button class="btn btn-sm btn-primary" @click="clearData(0)">新增</button>
                        </div>
                    </div>
                    <div class="panel-body">
                        <table class="table table-striped">
                            <thead>
                            <tr>
                                <th>上级编号</th>
                                <th>编号</th>
                                <th>英文名称</th>
                                <th>图标</th>
                                <th>中文名称</th>
                                <th>接口路由</th>
                                <th>Vue路由</th>
                                <th>显示状态</th>
                                <th>排序</th>
                                <th>修改时间</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr v-for="(val,key) in items" @click="getOne(val.id)" style="cursor: pointer">
                                <td scope="row">{{val.parent_id}}</td>
                                <td>{{val.id}}</td>
                                <td>{{val.name}}</td>
                                <td><i :class="val.ico" :title="val.ico"></i></td>
                                <td>{{val.intro}}</td>
                                <td>{{val.api_router}}</td>
                                <td>{{val.vue_router}}</td>
                                <td>{{val.state}}</td>
                                <td>{{val.sort}}</td>
                                <td>{{val.updated_at}}</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="col-md-4 layout">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        编辑菜单
                    </div>
                    <div class="panel-body">
                        <div class="form-group">
                            <label class="col-md-3">上级菜单</label>
                            <div class="col-md-9">
                                <select v-model="formData.parent_id" class="form-control">
                                    <option value="0">选择上级菜单</option>
                                    <template v-for="(val,key) in topMenu">
                                        <option :value="val.id">{{val.intro}}</option>
                                    </template>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-3">英文名称</label>
                            <div class="col-md-9">
                                <input class="form-control" v-model="formData.name" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-3">图标</label>
                            <div class="col-md-9">
                                <input class="form-control" v-model="formData.ico" />
                                <p class="text-left">更多：<a href="http://fontawesome.io/icons/" target="_blank">http://fontawesome.io/icons/</a></p>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-3">中文名称</label>
                            <div class="col-md-9">
                                <input class="form-control" v-model="formData.intro" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-3">Api路由</label>
                            <div class="col-md-9">
                                <input class="form-control" v-model="formData.api_router" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-3">Vue路由</label>
                            <div class="col-md-9">
                                <input class="form-control" v-model="formData.vue_router" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-3">显示状态</label>
                            <div class="col-md-9 text-left">
                                <el-tooltip :content="'当前值: ' + formData.state" placement="top">
                                <el-switch
                                        v-model="formData.state"
                                        name="state"
                                        active-color="#13ce66"
                                        inactive-color="#ff4949"
                                        active-value="1"
                                        inactive-value="0"
                                        active-text="开启"
                                        inactive-text="关闭">
                                </el-switch>
                                </el-tooltip>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-3">排序</label>
                            <div class="col-md-9">
                                <input type="number" class="form-control" v-model="formData.sort" />
                            </div>
                        </div>
                    </div>
                    <div class="panel-footer text-right">
                        <button class="btn btn-sm btn-primary" @click="editData()">保存</button>
                        <button class="btn btn-sm btn-info" @click="clearData(1)">取消</button>
                        <button class="btn btn-sm btn-info" @click="delOne(formData.id)">删除</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import LeftMenu from '../menu.vue';
    import MainHead from '../head.vue';
    export default {
        data() {
            return {
                currentPage: 1,//当前页码
                total: 0, //总行数
                items: [],
                formData: {
                    id: 0,
                    parent_id: 0,
                    name: '',
                    ico: '',
                    intro: '',
                    api_router: '',
                    vue_router: '',
                    state: '1',
                    sort: 0,
                },
                topMenu: [],
            }
        },
        methods: {
            clickCallback(pageNum) {
                var _this = this;
                _this.param.page = pageNum;
                _this.getList();
            },
            getList: function (event){
                var _this = this;
                axios.post('/api/admin/menus')
                    .then(function (res) {
                        if(res.data.code === 200){
                            _this.items = res.data.data;
                        }else {
                            _this.$message({
                                showClose: true,
                                message: res.data.msg,
                                type: 'error'
                            });
                        }
                    })
                    .catch(function (error) {
                        _this.$message({
                            showClose: true,
                            message: error,
                            type: 'error'
                        });
                    });
            },
            editData: function() {
                var _this = this;
                var api = '/api/admin/menu/store';
                if(_this.formData.name == ""){
                    _this.$message({
                        showClose: true,
                        message: "请填写角色名称",
                        type: 'waning'
                    });
                }
                if(_this.formData.id){
                    api = '/api/admin/menu/update/'+_this.formData.id;
                }
                axios.post(api, _this.formData)
                    .then(function (res) {
                        if(res.data.code === 200){
                            _this.$message({
                                showClose: true,
                                message: '编辑成功' ,
                                type: 'success'
                            });
                            _this.getList();
                            _this.getOneByParentId(0);
                        }else {
                            _this.$message({
                                showClose: true,
                                message: res.data.msg,
                                type: 'error'
                            });
                        }
                    })
                    .catch(function (error) {
                        _this.$message({
                            showClose: true,
                            message: error,
                            type: 'error'
                        });
                    });
            },
            getOne: function(id){
                var _this = this;
                axios.post('/api/admin/menu/'+id)
                    .then(function (res) {
                        if(res.data.code === 200){
                            _this.formData = res.data.data;
                            _this.formData.state = res.data.data.state.toString();
                        }else {
                            _this.$message({
                                showClose: true,
                                message: res.data.msg,
                                type: 'error'
                            });
                        }
                    })
                    .catch(function (error) {
                        _this.$message({
                            showClose: true,
                            message: error,
                            type: 'error'
                        });
                    });
            },
            delOne: function(id){
                var _this = this;
                axios.post('/api/admin/menu/delete/'+id)
                    .then(function (res) {
                        if(res.data.code === 200){
                            _this.$message({
                                showClose: true,
                                message: '编辑成功' ,
                                type: 'success'
                            });
                            _this.getList();
                        }else {
                            _this.$message({
                                showClose: true,
                                message: res.data.msg,
                                type: 'error'
                            });
                        }
                    })
                    .catch(function (error) {
                        _this.$message({
                            showClose: true,
                            message: error,
                            type: 'error'
                        });
                    });
            },
            clearData: function(type){
                var _this = this;
                if (_this.formData.id && type){
                    _this.getOne(_this.formData.id);
                }else{
                    _this.formData.name = "";
                    _this.formData.id = 0;
                    _this.formData.parent_id = 0;
                    _this.formData.ico = '';
                    _this.formData.intro = '';
                    _this.formData.api_router = '';
                    _this.formData.vue_router = '';
                    _this.formData.state = '1';
                    _this.formData.sort = 0;
                }
            },
            getOneByParentId: function(id){
                var _this = this;
                axios.post('/api/admin/menu/'+id+'/parent-id')
                    .then(function (res) {
                        if(res.data.code === 200){
                            _this.topMenu = res.data.data;
                        }else {
                            _this.$message({
                                showClose: true,
                                message: res.data.msg,
                                type: 'error'
                            });
                        }
                    })
                    .catch(function (error) {
                        _this.$message({
                            showClose: true,
                            message: error,
                            type: 'error'
                        });
                    });
            },
        },
        mounted() {
            this.getList();
            this.getOneByParentId(0);
        },
        components: {
            LeftMenu,
            MainHead,
        }
    }
</script>
